<html>
<head>
<link href="../style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="heading">
Layer Module (last update 12/05/01)
</p>
<p class="subheading">
Description:
</p>
<p>
The layer object provides a means to create and manipulate layer objects. These have some similarities to
<a href="spritedoc.html">sprites</a>, but they are mostly different in their purpose and abilities. Use this object if you require
movable layers which can have new content written to them, or loaded in from other files.
</p>
<p class="subheading">
To use:
</p>
<p>
The layer object is included in the <a href="coredoc.html">core module</a>, and so is available as soon as you link in the gamelib_core.js file:
</p>
<p class="jcode">
&lt;script language="Javascript" src="gamelib_core.js"&gt;&lt;/script&gt;
</p>
<p>
You then create a layer (called "mylayer" in this example):
</p>
<p class="jcode">
mylayer=new Gl_layer(0,0,100,'<font color="#0000ff">Test</font>');
</p>
<p>
The above creates a layer object. The 4 values passed to the layer creation
function are as follows:
</p>
<p>
(1) x position of layer<br>
(2) y position of layer<br>
(3) width of layer<br>
(4) Anything you like that you wish to be inserted in the layer's body. This could be
    text, images, or whatever. If you don't want anything in there, just use "".
</p>


<p class="subheading">
List of methods for layers
</p>

<p>
<a href="#append">append</a><br>
<a href="#clip">clip</a><br>
<a href="#dragType">dragType</a><br>
<a href="#follow">follow</a><br>
<a href="#hide">hide</a><br>
<a href="#lockLayer">lockLayer</a><br>
<a href="#load">load</a><br>
<a href="#makeDraggable">makeDraggable</a><br>
<a href="#makeUndraggable">makeUndraggable</a><br>
<a href="#moveTo">moveTo</a><br>
<a href="#resizeTo">resizeTo</a><br>
<a href="#setBackground">setBackground</a><br>
<a href="#setBgcolor">setBgcolor</a><br>
<a href="#setOpacity">setOpacity</a><br>
<a href="#setXlimits">setXlimits</a><br>
<a href="#setYlimits">setYlimits</a><br>
<a href="#setZ">setZ</a><br>
<a href="#show">show</a><br>
<a href="#stopFollowing">stopFollowing</a><br>
<a href="#unlockLayer">unlockLayer</a><br>
<a href="#write">write</a><br>
</p>

<p class="subheading">
List of properties for layers
</p>

<p>
<a href="#"></a><br>

<a href="#clipbottom">clipbottom</a><br>
<a href="#clipleft">clipleft</a><br>
<a href="#clipped">clipped</a><br>
<a href="#clipright">clipright</a><br>
<a href="#cliptop">cliptop</a><br>
<a href="#draggable">draggable</a><br>
<a href="#height">height</a><br>
<a href="#innerHTML">innerHTML</a><br>
<a href="#lock">lock</a><br>
<a href="#lockxoff">lockxoff</a><br>
<a href="#lockyoff">lockyoff</a><br>
<a href="#ob">ob</a><br>
<a href="#onclickdown">onclickdown</a><br>
<a href="#onclickup">onclickup</a><br>
<a href="#onmouseout">onmouseout</a><br>
<a href="#onmouseover">onmouseover</a><br>
<a href="#raw">raw</a><br>
<a href="#URL">URL</a><br>
<a href="#width">width</a><br>
<a href="#x">x</a><br>
<a href="#xmax">xmax</a><br>
<a href="#xmin">xmin</a><br>
<a href="#y">y</a><br>
<a href="#ymax">ymax</a><br>
<a href="#ymin">ymin</a><br>
<a href="#z">z</a><br>
</p>


<p class="subheading">
Descriptions of methods
</p>

<table>
<tr>
<th>Method</th><th NOWRAP>Parameters</th><th>Description</th>
</tr>
<tr>
<a name="append">
<td>append</td><td>String, Numeric</td><td>
			<p>
			Appends new html content (first argument) to the current content of the layer.
			(only works with Netscape 4 if the previous content was WRITTEN.)
			The first argument is a string, the second an offset into the
			original content to add the text. If the second argument is left out,
			the new content is added to the end of the old.
			</p>
			<p>
			Remember, if you have html tags in the old content, and corrupt
			them with new content added in the wrong place, results will be
			at best unsightly!
			</p>
</td>
</tr>
<tr>
<a name="clip">
<td>clip</td><td>Numeric, Numeric, Numeric, Numeric</td><td>
			Clips the layer, arguments 1 and 2 are the clips in x axis, 3 and 4 are the clips in y axis.
			* Note: See also <a href="#clipleft">clipleft</a>, <a href="clipright">clipright</a>, <a href="#cliptop">cliptop</a>, <a href="#clipbottom">clipbottom</a> and <a href="#clipped">clipped</a> properties.
</td>
</tr>
<tr>
<a name="dragType">
<td>dragType</td><td>String/Numeric</td><td>
			<p>
			How the layer can be dragged (see draggable property below which must be
			set first). The dragType (if numeric) can range from 0 to 2:
			</p>
			<p>
			0 or "normal" = normal dragging (default)<br>
			1 or "vertical" = Layer can only be dragged in the y axis<br>
			2 or "horizontal" = Layer can only be dragged in the x axis<br>
			</p>
</td>
</tr>
<tr>
<a name="follow">
<td>follow</td><td>Object, Numeric, Numeric</td><td>
			This method causes a layer to remain a set distance from a
			gamelib mouse or sprite object (passed as the first argument) wherever it moves around the page.
			x (second argument) and y (third argument) are the relative distance the layer is from the Object's
			coordinates. As always though, the layer cannot exceed its Xlimits
			or Ylimits (see <a href="#setXlimits">setXlimits()</a> and <a href="#setYlimits">setYlimits()</a> methods)
			* Note: If you wish one layer to move in sync with another, you
			should use the <a href="#lockLayer">lockLayer()</a> method; it's far more efficient.
			See also <a href="#stopFollowing">stopFollowing()</a> method
</td>
</tr>
<tr>
<a name="hide">
<td>hide</td><td>(none)</td><td>Hides the layer
</td>
</tr>
<tr>
<a name="lockLayer">
<td>lockLayer</td><td>Object, Object, [...]</td><td>
			This locks other layers (passed as the arguments) to this one. So if this layer moves, then
			the locked layers will move in unison. Eg, if this layer was at position
			100,100 and a layer you lock is at 150,150, then the locked layer will
			always be 50 pixels to the right and below this layer when it moves.
			Subsequent calls to this method will add extra layers to the list.
			Note: layers cannot exceed their x and y limits
			(see <a href="#xmin">xmin</a>, <a href="#xmax">xmax</a>, 
			<a href="#ymin">ymin</a>, <a href="#ymax">ymax</a>) even if
			they're locked to another layer. See also <a href="#unlockLayer">unlockLayer()</a>.
</td>
</tr>
<tr>
<a name="load">
<td>load</td><td>String, Boolean, Numeric</td><td>
			Loads an external html file (passed as first argument) into the layer.
			If the second argument is true, then browser will be forced to load from
			the server, and not use the cache. The third argument is the maximum time
			(in seconds) to wait for this page to load before giving up.<br><br>

			Don't try to load framesets into layers,
			it'll all end in tears :-) The old Gl_loadWait variable is redundant as of
			version 1.998. It still exists, so as not to break old scripts, but will
			now always be null, as the gamelib uses an internal queue to manage
			the loading of multiple layers. Since gamelib uses the queue, you may now
			start as many layers loading as you wish, and they will be loaded in
			sequence, and any that fail to load will not cause the script to break.
</td>
</tr>
<tr>
<a name="makeDraggable">
<td>makeDraggable</td><td>(none)</td><td>Makes the layer draggable!
</td>
</tr>
<tr>
<a name="makeUndraggable">
<td>makeUndraggable</td><td>(none)</td><td>Stops the layer from being draggable!
</td>
</tr>
<tr>
<a name="moveTo">
<td>moveTo</td><td>
			Numeric, Numeric</td><td>Moves the layer to position x,y (passed as the arguments).
			You cannot move a layer outside its x and
			y limits (see <a href="#xmin">xmin</a>,<a href="#xmax">xmax</a>,<a href="#ymin">ymin</a>,<a href="#ymax">ymax</a>).
</td>
</tr>
<tr>
<a name="resizeTo">
<td>resizeTo</td><td>Numeric, Numeric</td><td>
			Resizes the layer to a set width and height (passed as arguments).
			This fixes the layers size, so any content the layer has, or is added
			to it in the future will not resize it. The only time it will resize
			to new content is if it's loaded (using the <a href="#load">load()</a> method)
</td>
</tr>
<tr>
<a name="setBackground">
<td>setBackground</td><td>String</td><td>
			<p>
			Sets the layer's background image (passed as a URL in the String argument)
			like a background of a normal web page.
			</p>
			<p>
			* Note: I've noticed that IE5 seems unhappy when moving layers
			which have background images set. This is not a bug with the gamelib,
			but a bug with the browser's rendering engine. It constantly tries to
			reload the image, resulting in slowdown. The best work-around I can
			suggest is to use 2 layers, the backmost one having an image, and the
			front one transparent. Not ideal, but there... Only set background images
			with layers that are going to be mostly static.
			</p>
</td>
</tr>
<tr>
<a name="setBgcolor">
<td>setBgcolor</td><td>String</td><td>Sets the layer's background color. The color argument is a string, so:
			<span class="jcode">mylayer.setBgcolor("#000000")</span> would set a black background color.
</td>
</tr>
<tr>
<a name="setOpacity">
<td>setOpacity</td><td>Numeric</td><td>
			This sets the opacity of the layer. The number passed as an argument
			can range from 0 (completely transparent) to 100 (completely opaque).
			* Note: This method has no effect with Netscape 4 (browser doesn't support transparency)
</td>
</tr>
<tr>
<a name="setXlimits">
<td>setXlimits</td><td>Numeric, Numeric</td><td>
			Limits the layer's x movement. Layer cannot move left furthur than the first argument,
			or right furthur than the right argument - MINUS its width.
</td>
</tr>
<tr>
<a name="setYlimits">
<td>setYlimits</td><td>Numeric, Numeric</td><td>
			Limits the layer's y movement. Layer cannot move up furthur than the first argument,
			or down furthur than the second argument MINUS its height. Be aware that loading new
			content into a layer might well increase its height, and so it might be moved to keep
			it within its limits after loading...
</td>
</tr>
<tr>
<a name="setZ">
<td>setZ</td><td>Numeric</td><td>Sets the z-index
</td>
</tr>
<tr>
<a name="show">
<td>show</td><td>(none)</td><td>Reveals the layer
</td>
</tr>
<tr>
<a name="stopFollowing">
<td>stopFollowing</td><td>(none)</td><td>This method stops the layer following another screen object
</td>
</tr>
<tr>
<a name="unlockLayer">
<td>unlockLayer</td>
<td>Layer Object/null</td>
<td>
This unlocks one or more layers that are locked to this. If no layers are passed, then all layers
locked to this will be unlocked! This is handy when you just need a quick way to unhook things.
</td>
</tr>
<tr>
<a name="write">
<td>write</td><td>String</td><td>Replaces the content of the layer with new html content
</td>
</tr>
</table>


<p class="subheading">
Descriptions of properties
</p>

<table>
<tr>
<th>Property</th><th NOWRAP>Data Type</th><th NOWRAP>Read/Write</th><th>Description</th>
</tr>
<tr>
<a name="clipbottom">
<td>clipbottom</td><td>Numeric</td><td>R</td><td>The amount in pixels the layer is clipped from its bottom edge</td>
</tr>
<tr>
<a name="clipLeft">
<td>clipleft</td><td>Numeric</td><td>R</td><td>The amount in pixels the layer is clipped from its left edge</td>
</tr>
<tr>
<a name="clipright">
<td>clipright</td><td>Numeric</tc><td>R</td><td>The amount in pixels the layer is clipped from its right edge</td>
</tr>
<tr>
<a name="cliptop">
<td>cliptop</td><td>Numeric</td><td>R</td><td>The amount in pixels the layer is clipped from its top edge</td>
</tr>
<tr>
<a name="clipped">
<td>clipped</td><td>Boolean</td><td>R</td><td>Set to true if the layer has been clipped. * Note: The <a href="#resizeTo">resizeTo()</a> method also clips layers</td>
</tr>
<tr>
<a name="draggable">
<td>draggable</td><td>Boolean</td><td>R/W</td><td>
				If set to true, the layer is draggable! There must be a <a href="mousedoc.html">mouse
				object</a> created before this will work. See also <a href="#dragType">dragType()</a> method. * Note: a layer
				cannot be dragged beyond its x and y limits. It's also now better to use the new <a href="#makeDraggable">makeDraggable()</a> and <a href="#makeUndraggable">makeUndraggable()</a>
				methods, rather than setting the property yourself
</td>
</tr>
<tr>
<a name="height">
<td>height</td><td>Numeric</td><td>R</td><td>Returns the current height of the layer. Clipping is ignored</td>
</tr>
<tr>
<a name="innerHTML">
<td>innerHTML</td><td>String</td><td>R</td><td>
				Returns the html content of the layer. Works with Netscape 4
				but only if you have WRITTEN the content, not loaded it!
</td>
</tr>
<tr>
<a name="lock">
<td>lock</td><td>Object</td><td>R</td><td>Returns the layer object that's locked to this layer</td>
</tr>
<tr>
<a name="lockxoff">
<td>lockxoff</td><td>Numeric</td><td>R</td><td>Returns how far away in the x axis the locked layer is</td>
</tr>
<tr>
<a name="lockyoff">
<td>lockyoff</td><td>Numeric</td><td>R</td><td>Returns how far away in the y axis the locked layer is</td>
</tr>
<tr>
<a name="ob">
<td>ob</td><td>Object</td><td>R/W</td><td>
				This is a reference to the layer's style properties. To use
				this succesfully, a good knowledge of the browser DOMs is
				necessary.
</td>
</tr>
<tr>
<a name="onclickdown">
<td>onclickdown</td><td>String</td><td>R/W</td><td>
				A string which contains command(s) to be executed when the mouse
				button is pressed while the mouse is over the layer.
</td>
</tr>
<tr>
<a name="onclickup">
<td>onclickup</td><td>String</td><td>R/W</td><td>
				A string which contains command(s) to be executed when the mouse
				button is released while the mouse is over the layer.
</td>
</tr>
<tr>
<a name="onmouseout">
<td>onmouseout</td><td>String</td><td>R/W</td><td>
				A string which contains command(s) to be executed when the mouse
				moves away from the layer.
</td>
</tr>
<tr>
<a name="onmouseover">
<td>onmouseover</td><td>String</td><td>R/W</td><td>
				A string which contains command(s) to be executed when the mouse
				moves over the layer.
</td>
</tr>
<tr>
<a name="raw">
<td>raw</td><td>Object</td><td>R/W</td><td>
				This is a reference to the layer object itself. There are
				differences from the <a href="#ob">ob</a> property with IE4/5, but not
				netscape 4x. A thorough working knowledge of browser DOMs
				is required to use this.
</td>
</tr>
<tr>
<a name="URL">
<td>URL</td><td>String</td><td>R</td><td>URL the layer has loaded. (see <a href="#load">load()</a> method above)</td>
</tr>
<tr>
<a name="width">
<td>width</td><td>Numeric</td><td>R</td><td>Returns the current width of the layer. Clipping is ignored</td>
</tr>
<tr>
<a name="x">
<td>x</td><td>Numeric</td><td>R/W</td><td>Returns the x position of the layer</td>
</tr>
<tr>
<a name="y">
<td>y</td><td>Numeric</td><td>R</td><td>Returns the y position of the layer</td>
</tr>
<tr>
<a name="z">
<td>z</td><td>Numeric</td><td>R</td><td>Returns the z index of the layer</td>
</tr>
<tr>
<a name="xmin">
<td>xmin</td><td>Numeric</td><td>R</td><td>Lowest limit layer can move to or be dragged to in x axis. Default=0</td>
</tr>
<tr>
<a name="xmax">
<td>xmax</td><td>Numeric</td><td>R</td><td>Highest limit layer can move to or be dragged to in x axis. Default=1000</td>
</tr>
<tr>
<a name="ymin">
<td>ymin</td><td>Numeric</td><td>R</td><td>Lowest limit layer can move to or be dragged to in x axis. Default=0</td>
</tr>
<tr>
<a name="ymax">
<td>ymax</td><td>Numeric</td><td>R</td><td>Highest limit layer can move to or be dragged to in x axis. Default=1000</td>
</tr>
</table>

</body>
</html>